<template>
  <div class="grandson">
    <div>孙组件</div>
    <div>祖组件传递的参数：{{ grandpaValue }}</div>

    <div class="input-box">
      <el-input clearable v-model="inputValue" />
      <el-button @click="grandpaChange">改变祖组件的值</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject } from "vue";

const { grandpaValue, renewalGrandpa }: any = inject("grandpaValue");
const inputValue = ref("");
const grandpaChange = () => {
  renewalGrandpa && renewalGrandpa(inputValue.value);
};
</script>
<style scoped lang="scss">
.grandson {
  background-color: rgb(199, 157, 103);
  padding: 8px;
  .input-box {
    display: flex;
    margin: 8px 0;
    .el-input {
      width: 200px;
      margin-right: 12px;
    }
  }
}
</style>
